<template>
  <div id="totalexpenditure" class="totalexpenditure" />
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { getexpenditure } from '@/api/index'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getexpenditure()
  },
  methods: {
    async getexpenditure() {
      const { list } = await getexpenditure()
      this.list = list
      this.DoughnutChart()
    },
    DoughnutChart() {
      echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])

      var chartDom = document.getElementById('totalexpenditure')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '公司季度总支出',
          left: 'center',
          textStyle: {
            // 文字颜色
            color: 'black'
          }
        },
        xAxis: {
          type: 'category',
          data: ['第一季度', '第二季度', '第三季度', '第四季度']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 万元'
          }
        },
        series: [
          {
            data: this.list,
            type: 'line',
            label: {
              show: true
            },
            lineStyle: {
              color: '#2c9ef7'
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>
.totalexpenditure{
    height: 400px;
}
</style>
